<template>
    <div class="msgEmptyStyle">
        <div ref="MsgListEmptyRef"></div>
        <span class="setSpeedStyle">speed（×{{pointInfo.handlePosition}}）</span>
        <div class="changeEmptySpeedStyle">
            <div class="beGreenStyle" :style="`width:${pointInfo.marginLeftNum + 50}%;`"></div>
            <span class="pointStyle" @touchstart="pointTouchStart" @touchend="pointTouchEnd" @touchmove="pointTouchMove"
            :style="`margin-left: ${pointInfo.marginLeftNum}%;`"></span>
        </div>
        <div>{{noMsgLotInfo}}</div>
    </div>
</template>
<script setup>
import lottie from "lottie-web";
import { onMounted, ref ,getCurrentInstance, reactive,onBeforeUnmount} from 'vue'
const { proxy } = getCurrentInstance()

let noMsgLot = ref()
let noMsgLotInfo = ref()
let happyJson = new URL('@/assets/lotties/happy.json', import.meta.url).href
onMounted(()=>{
    if(localStorage.getItem('conversation_id') == null){
        noMsgLot.value = lottie.loadAnimation({
            container: proxy.$refs[`MsgListEmptyRef`],
            renderer: "svg",
            loop: true,
            autoplay: false,
            path: happyJson
        })
        noMsgLot.value.play()
        setTimeout(() => {
            noMsgLotInfo.value = '暂无聊天记录，可发送消息建立对话'
        }, 10);
    }
})

onBeforeUnmount(()=>{
    if(noMsgLot.value != null){
        noMsgLot.value.destroy()
        noMsgLot.value = null
    }
})

let pointTouchMarginLeftNum = null
let isSliding = false
let startPosition = 0
let currentPosition = 0
let sliderWidth = window.innerWidth * .5 // 设置滑块长
let divisions =  4 // 将滑块分成4等分
let handlePositionMap = reactive({
    '-50':.5,
    '-25':1,
    '0':2,
    '25':4,
    '50':8,
    '0.5':-50,
    '1':-25,
    '2':0,
    '4':25,
    '8':50
})
let pointInfo = reactive({
    marginLeftNum:-25,
    handlePosition: 1,
})
const pointTouchStart = (target)=>{
    isSliding = true
    startPosition = target.touches[0].clientX;
    pointTouchMarginLeftNum = pointInfo.marginLeftNum
}
const pointTouchEnd = ()=>{
    isSliding = false;
    pointInfo.marginLeftNum = handlePositionMap[pointInfo.handlePosition]
    noMsgLot.value.setSpeed(pointInfo.handlePosition)
}
const pointTouchMove = (target) =>{
    if(isSliding){
        currentPosition = target.touches[0].clientX;
        let newPosition = (currentPosition - startPosition ) / sliderWidth + pointTouchMarginLeftNum * .01
        

        // 限制滑块的移动范围
        if (newPosition < -.5) newPosition = -.5;
        if (newPosition > .5 ) newPosition = .5;
        pointInfo.marginLeftNum = newPosition * 100
        
        // 计算滑块应该停在哪个位置
        pointInfo.handlePosition = ( Math.round((newPosition + .5 ) * divisions) * (sliderWidth / divisions) / sliderWidth - .5 ) * 100;
        pointInfo.handlePosition = handlePositionMap[pointInfo.handlePosition]
    }
}
defineExpose({
    noMsgLot,
})
</script>
<style scoped lang="scss">
.msgEmptyStyle{
    position: absolute;
    width: 100%;
    text-align: center;
    color: rgb(189, 189, 189);
    .setSpeedStyle{
        position: absolute;
        color: black;
        margin-top: -2.5rem;
        left: 30%;
        transform: translateX(-100%);
    }
    .changeEmptySpeedStyle{
        margin-top: -2rem;
        height: 5px;
        width: 50%;
        left: 35%;
        position: absolute;
        background-color: rgb(240, 240, 240);
        border-radius: 4px;
        .beGreenStyle{
            border-radius: 4px;
            height: 5px;
            position: absolute;
            background-color: rgb(128, 221, 115);
        }
        .pointStyle{
            position: absolute;
            background-color: rgb(50, 156, 36);
            padding: 10px;
            transform: translate(-50%,-35%);
            border-radius: 50%;
        }
    }
}
</style>